<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 400px;
            height: 600px;
            border: 1px solid #888;
            margin: 200px;
        }
        .title input{
            width: 300px;
            height: 30px;
            margin: 10px;
        }
        .title button{
            height: 35px;
            border: none;
            color: green;
            font-weight: 700;
        }
        .body{
            margin: 10px;
            display: flex;
            justify-content: space-between;
        }
        .body button{
            color: white;
            background-color: green;
            font-weight: 700;
            border: none;
            width: 100px;
            height: 28px;  
        }
        .body .red{
            background-color: red;
        }
        h2{
            margin: 20px 10px;
        }
        .bottom .list{
            margin: 10px;
            display: flex;
            justify-content: space-between;
            background-color: red;
            width: 380px;
            height: 40px;
            line-height: 40px;
        }
        .bottom .finished{
            background-color: green;
        }
        .empty{
            color: red;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="title">
            <input type="text" placeholder="输入任务名称"v-model="inputText">
            <button @click="add">新增</button>
        </div>
        <div class="body">
            <button>全部任务({{all()}})</button>
            <button>已完成{{finished()}}</button>
            <button class="red">未完成{{nulla()}}</button>
        </div>
        <h2>任务列表</h2>
        <div class="bottom">
            <div :class="{list:true,finished:item.status}"v-for="(item,index) in tasklist":key="index">
                <input type="checkbox" @click="changeStatus(item)">
                <span>{{item.id}}</span>
                <span>{{item.name}}</span>
                <button @click="del(item)">删除</button>
            </div>
        </div>
        <div class="empty"v-show="tasklist.length==0">任务列表为空</div>

    </div>
</body>
<script src="./vue-2.5.21.js"></script>
<script>
    var v=new Vue({
        el:'#app',
        data:{
            inputText:'',
            tasklist:[]
        },
        methods:{
            add(){
                if(this.inputText){
                    var obj={id:this.tasklist.length+1,name:this.inputText,status:false}
                    this.tasklist.push(obj)
                    this.inputText=''
                }
            },
            changeStatus(item){
                item.status=!item.status
            },
            del(item){
                for(let i=0;i<this.tasklist.length;i++){
                    if(this.tasklist[i]==item){
                        this.tasklist.splice(i,1)
                    }
                }
            },
            all(){
                let sum=0
                sum=this.tasklist.length
                return sum
            },
            finished(){
                let num=0
                this.tasklist.forEach((item,index)=>{
                    if(item.status==true){
                        ++num
                    }
                })
                return num
            },
            nulla(){
                let num=0
                this.tasklist.forEach((item,index)=>{
                    if(item.status==false){
                        ++num
                    }
                })
                return num
            }
        }
    })
</script>
</html>